<template>
<div>
    <table class="table table-bordered">
        <thead>
            <tr style="background-color: aqua;">
                <td>登录名称</td>
                <td>登录密码</td>
                <td>真实姓名</td>
                <td>身份证号</td>
                <td>联系方式</td>
                <td>出生日期</td>
                <td>性别</td>
                <td>用户类型</td>
                <td>年收入</td>
            </tr>
        </thead>
    
        <tbody>
            <tr v-for="item in info">
                <td>{{ item.UL_Name }}</td>
                <td>******</td>
                <td>{{ item.U_Name }}</td>
                <td>{{ item.U_IdCard }}</td>
                <td>{{ item.U_Phone }}</td>
                <td>{{ item.U_Date.substring(0,10) }}</td>
                <td>{{ (item.U_Sex?"男":"女") }}</td>
                <td>{{ item.UT_Name }}</td>
                <td>{{ item.U_InCome }}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';

//创建响应式数据
const info=ref([{
    U_Id:0,
    UL_Name:"",
    UL_Pwd:"******",
    U_Name:"",
    U_Sex:"",
    U_Phone:"",
    U_Date:"",
    U_IdCard:"",
    U_InCome:"",
    UT_Name:"",
    UT_Id:0
}])

//创建生命周期函数钩
onMounted(()=>{
    LoadData();
})

//完成用户类型信息加载
const LoadData=()=>{
    axios.get("https://localhost:44321/api/Users/GetUserInfo")
    .then(res=>{
        console.log(res.data)
        info.value=res.data;
    })
}
</script>